<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            height: 700px;
        }
        #top1{
            background-color: red;
        }
        #top2{
            background-color: green;
        }
        #top3{
            background-color: blue;
        }
        ul{
            position:fixed;
            top: 200px;
            right: 0;
            list-style: none;
        }
        li{
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border: 1px solid blueviolet;
        }
    </style>
</head>
<body>
    <div id="top1">第一个片区</div>
    <div id="top2">第二个片区</div>
    <div id="top3">第三个片区</div>
    <ul>
        <li id="li1">A</li>
        <li id="li2">B</li>
        <li id="li3">C</li>
    </ul>
    <script type="text/javascript">
        window.onscroll=function(){
            var top=document.body.scrollTop;
            if(top<=700){
                document.getElementById("li1").style.background="yellow";
                document.getElementById("li2").style.background="";
                document.getElementById("li3").style.background="";
            }else if(top>700 && top<=1400){
                document.getElementById("li1").style.background="";
                document.getElementById("li2").style.background="yellow";
                document.getElementById("li3").style.background="";
            }else{
                document.getElementById("li1").style.background="";
                document.getElementById("li2").style.background="";
                document.getElementById("li3").style.background="yellow";
            }
        }
    </script>
</body>
</html>